import React, { useState, useEffect } from 'react';
import {
    View, ScrollView, Text,
} from 'react-native';
import PropTypes from 'prop-types';
import { WingBlank, Button, Modal } from '@ant-design/react-native';
import Item from '../Item';
import { delImptask } from '../../../../comconfig/sqlfun';
import styles from './styles';

const List = ({
    navigation, impTaskList, getList, sortList,
}) => {
    const [rowids, setRowids] = useState([]);
    useEffect(() => {
        const pickRowid = () => {
            const arr = [];
            for (let i = 0; i < impTaskList.length; i += 1) {
                const rowid = parseInt(impTaskList[i].rowid, 10);
                const checked = parseInt(impTaskList[i].checked, 10);
                if (checked === 1) {
                    arr.push(rowid);
                }
            }
            return arr;
        };
        setRowids(pickRowid());
    }, [getList]);

    if (impTaskList.length === 0) {
        return (
            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                <WingBlank>
                    <Text style={{ fontSize: 16 }}>暂无数据</Text>
                </WingBlank>
            </View>
        );
    }

    const delSelect = () => (
        Modal.operation(
            [
                {
                    text: '删除',
                    onPress: async () => {
                        await delImptask(rowids);
                        await getList();
                    },
                    style: { color: '#0F8DE9' },
                },
                {
                    text: '取消',
                    style: { color: '#0F8DE9' },
                },
            ],
        )
    );

    return (
        <View>
            <View style={styles.row}>
                <Button
                    type="primary"
                    onPress={() => {
                        delSelect();
                    }}
                    style={styles.button}
                >
                    删除完成事务
                </Button>
                <Button
                    onPress={() => Modal.operation([
                        {
                            text: '还原',
                            onPress: () => {
                                getList();
                            },
                            style: { color: '#0F8DE9' },
                        },
                        {
                            text: '紧急优先',
                            onPress: () => {
                                sortList('asc');
                            },
                            style: { color: '#0F8DE9' },
                        },
                        {
                            text: '一般优先',
                            onPress: () => {
                                sortList('desc');
                            },
                            style: { color: '#0F8DE9' },
                        },
                    ])}
                    style={styles.button}
                >
                    <Text style={{ color: '#0F8DE9' }}>
                        排序
                    </Text>
                </Button>
            </View>
            <WingBlank>
                <ScrollView style={styles.scrollView}>
                    {
                        // 通过map循环动态展示获得的数据
                        impTaskList.map(objTask => (
                            // 将需要的参数传入子组件，key是必要参数
                            <Item
                                navigation={navigation}
                                title={objTask.title}
                                rowid={objTask.rowid}
                                impcode={objTask.impcode}
                                key={objTask.rowid}
                                alarmid={parseInt(objTask.alarmid, 10)}
                                checked={parseInt(objTask.checked, 10)}
                                getList={getList}
                            />
                        ))
                    }
                </ScrollView>
            </WingBlank>
        </View>
    );
};
List.defaultProps = {
    impTaskList: [],
    getList: () => {},
    sortList: () => {},
};
List.propTypes = {
    impTaskList: PropTypes.arrayOf(PropTypes.any),
    getList: PropTypes.func,
    sortList: PropTypes.func,
};
export default List;
